<template>
  <div class="drinkDiv">
    {{ getDrinkList() }}{{getAllEntremetsList()}}
    <div class="headDiv">
      <template>
        <el-button type="success" size="medium" @click="toAdd">添加新饮品</el-button>
        <span class="queryName">饮品名称:</span>
        <el-input v-model="q.name" style="width: 250px;font-size: 16px" clearable></el-input>
        <el-button type="warning" size="medium" @click="query">搜索</el-button>
        <span class="queryStatus"></span>
        <el-radio-group v-model="q.status" @change="queryByStatus">
          <el-radio-button :label="0">下架</el-radio-button>
          <el-radio-button :label="1">上架</el-radio-button>
          <el-radio-button :label="-1">全部</el-radio-button>
        </el-radio-group>
      </template>
    </div>
    <div class="bodyDiv">
      <el-table :data="drinkList" style="width: 100%" :header-cell-style="{background:'#DCDCDC',color:'#606266'}">
        <el-table-column width="80" prop="id" label="饮品编号" header-align="center" align="center"></el-table-column>
        <el-table-column width="110" prop="name" label="饮品名称" header-align="center" align="center"></el-table-column>
        <el-table-column width="120" label="图片" header-align="center" align="center">
          <template slot-scope="s">
            <el-image
              style="width: 100px; height: 100px"
              :src=s.row.image
              fit="cover">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column width="160" prop="sellPoint" label="卖点描述" header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="80" prop="cupSize" label="杯号" header-align="center" align="center">
        </el-table-column>
        <el-table-column width="160" label="可选温度" header-align="center" align="center">
          <template slot-scope="s">
            <el-tag v-for="(o,i) in s.row.temps" size="mini">{{ o }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="160" label="可选甜度" header-align="center" align="center">
          <template slot-scope="s">
            <el-tag v-for="(o,i) in s.row.sweetnessList" size="mini" type="warning">{{ o }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="110" label="可选配料" header-align="center" align="center">
          <template slot-scope="s">
            <el-popover
              placement="bottom-start"
              width="250"
              trigger="click">
              <el-tag v-for="(o,i) in s.row.entremetsList" :type="tag[parseInt(i%4)]">{{ o.name }}</el-tag>
              <el-button slot="reference" size="mini">详情</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="110" prop="price" label="单品价格(元)" header-align="center" align="center">

        </el-table-column>
        <el-table-column width="70" prop="status" label="状态" header-align="center" align="center">
          <template slot-scope="s">
            <el-tag effect="dark" size="mini" :type="s.row.status===1?'success':'danger'">
              {{ s.row.status === 1 ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="80" prop="modifiedUser" label="修改者" header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="160" prop="modifiedTime" label="修改时间" header-align="center"
                         align="center"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="toAddOther(s.row)"><i class="el-icon-plus"></i>杯号</el-button>
            <el-button type="primary" size="mini" @click="toUpdate(s.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(s.$index,s.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bodyBottom">
        <div class="bodyBottomPage">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.page"
            :page-sizes="page.pageSizeList"
            :page-size="page.pageSize"
            layout="prev,pager,next,total,sizes"
            :total="page.total">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="22%" top="50px">
      <el-form label-width="100px">
        <el-form-item label="饮品图片" class="item">
          <img ref="drinkImg" :src="imageUrl" width="120px" height="120px"/>
          <input ref="imageInput" type="file" @change="onload()"></input>
        </el-form-item>
        <el-form-item label="饮品名称" class="item">
          <el-input v-model="m.name" size="medium" clearable></el-input>
        </el-form-item>
        <el-form-item label="单品价格(元)" class="item">
          <el-input v-model="m.price" size="medium" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态" class="item">
          <el-radio-group v-model="m.status">
            <el-radio :label=1>上架</el-radio>
            <el-radio :label=0>下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="杯号" class="item">
          <el-input v-model="m.cupSize" size="medium" clearable></el-input>
        </el-form-item>
        <el-form-item label="可选温度" class="item">
          <el-input v-model="m2.tempsStr" size="medium" clearable></el-input>
        </el-form-item>
        <el-form-item label="可选甜度" class="item">
          <el-input v-model="m2.sweetnessListStr" size="medium" clearable></el-input>
        </el-form-item>
        <el-form-item label="可选配料" class="item">
          <el-select v-model="m.entremetsIds" multiple placeholder="请选择">
            <el-option
              v-for="entremets in allEntremetsList"
              :label="entremets.name"
              :value="entremets.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" class="item">
          <el-input type="textarea" v-model="m.sellPoint" size="medium" clearable></el-input>
        </el-form-item>
        <span style="margin-left: 170px">
        <el-button type="primary" @click="ok">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
      </el-form>
    </el-dialog>
    <el-dialog title="设置不同杯号和价格" :visible.sync="dialogVisibleOther" width="20%">
      <el-form label-width="100px">
        <el-form-item label="饮品名称">{{ m.name }}</el-form-item>
        <el-form-item label="添加杯号">
          <el-input v-model="m.cupSize"></el-input>
        </el-form-item>
        <el-form-item label="设置价格(元)">
          <el-input v-model="m.price"></el-input>
        </el-form-item>
        <span style="margin-left: 170px">
        <el-button type="primary" @click="ok">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {

  name: "DrinkM",
  data() {
    return {
      refreshE: 0,
      refresh: 0,
      imageUrl: '#',
      imageFile: '',
      isAdd: false,
      isAddOtherCupSize: false,
      dialogVisible: false,
      dialogVisibleOther: false,
      q: {
        name: '',
        status: 1
      },
      tag: [
        'success', 'info', 'warning', 'danger'
      ],
      page: {
        page: 1,
        pageSizeList: [2, 4, 8, 16],
        pageSize: 4,
        total: 11,
      },
      m2: {
        tempsStr: '',
        sweetnessListStr: '',
      },
      m: {
        id: null,
        name: '',
        image: '',
        sellPoint: '',
        cupSize: '',
        temps: [],
        sweetnessList: [],
        entremetsIds: [],
        entremetsList: [],
        price: '',
        status: '',
        modifiedUser: '',
        modifiedTime: ''
      },
      allEntremetsList: [],
      drinkList: [],
    }
  },
  methods: {
    getAllEntremetsList: function () {
      if(this.refreshE === 0){
        this.refreshE++;
        var that = this;
        axios.get("http://localhost:8081/entremets?name=%20&status=1&pageSize="+100000).then(res=>{
          that.allEntremetsList = res.data.data.list;
        })
      }
    },


    getDrinkList: function () {
      if (this.refresh === 0) {
        this.refresh++;
        var that = this;
        this.q.name = this.q.name.trim() === '' ? ' ' : this.q.name;
        axios.get("http://localhost:8081/drink?name=" + this.q.name + '&status=' + this.q.status + "&page=" + this.page.page + "&pageSize=" + this.page.pageSize)
          .then(res => {
            that.drinkList = res.data.data.list;
            for (let i = 0; i < that.drinkList.length; i++) {
              that.drinkList[i].price = (that.drinkList[i].price / 100).toFixed(2);
            }
            that.page.total = res.data.data.total;
          })
      }
    },


    toAdd: function () {
      this.dialogVisible = true;
      this.m = {};
      this.imageFile = '';
      this.imageUrl = '#';
      this.m2.sweetnessListStr = '';
      this.m2.tempsStr = '';
      this.isAdd = true;
      this.isAddOtherCupSize = false;
    },
    toAddOther: function (row) {
      this.dialogVisibleOther = true;
      this.m = JSON.parse(JSON.stringify(row));
      this.m.cupSize = '';
      this.m.price = '';
      this.isAdd = true;
      this.isAddOtherCupSize = true;
    },
    toUpdate: function (row) {
      this.dialogVisible = true;
      this.isAdd = false;
      this.isAddOtherCupSize = false;
      this.m = JSON.parse(JSON.stringify(row));
      this.imageUrl = this.m.image;
      this.imageFile = '';
      this.m2.tempsStr = '';
      this.m2.sweetnessListStr = '';
      this.entremetsIds = [];
      for (let i = 0; i < this.m.temps.length; i++) {
        if (i !== 0) {
          this.m2.tempsStr += ',';
        }
        this.m2.tempsStr += this.m.temps[i];
      }
      for (let i = 0; i < this.m.sweetnessList.length; i++) {
        if (i !== 0) {
          this.m2.sweetnessListStr += ',';
        }
        this.m2.sweetnessListStr += this.m.sweetnessList[i];
      }
    },
    query: function () {
      this.refresh = 0;
      this.getDrinkList();
    },
    queryByStatus: function () {
      this.page.page = 1;
      this.query();
    },

    onload: function () {
      this.imageFile = this.$refs.imageInput.files[0];
      this.imageUrl = window.webkitURL.createObjectURL(this.imageFile);
      this.$refs.drinkImg.src = this.imageUrl;
    },

    sub: function () {
      var formData = new FormData();
      if (this.imageFile !== '') formData.append('file', this.imageFile);
      formData.append('name', this.m.name);
      /* 1.编辑:添加image  2.新添加:不添加image 3.添加不同杯号:添加image */
      if (!(this.isAdd && !this.isAddOtherCupSize)) formData.append('image', this.m.image);
      formData.append('sellPoint', this.m.sellPoint);
      formData.append('cupSize', this.m.cupSize);
      //1:编辑和添加用m2  2:添加杯号用m
      if (this.isAddOtherCupSize) {
        formData.append('temps',this.m.temps);
        formData.append("sweetnessList", this.m.sweetnessList);
      }else {
        if (this.m2.tempsStr.trim() !== '') {
          this.m.temps = this.m2.tempsStr.split(',');
          formData.append('temps', this.m.temps);
        }
        if (this.m2.sweetnessListStr !== '') {
          this.m.sweetnessList = this.m2.sweetnessListStr.split(',');
          formData.append('sweetnessList', this.m.sweetnessList);
        }
      }
      if(this.m.entremetsIds !== [] && this.m.entremetsIds.length > 0) formData.append('entremetsIds', this.m.entremetsIds);
      formData.append('price', this.m.price * 100);
      formData.append('status', this.m.status);
      var that = this;
      if (this.isAdd) {
        if (this.isAddOtherCupSize) formData.append('id', this.m.id);
        axios.post("http://localhost:8081/drink", formData).then(res => {
          this.messageAlert(res.data.status, res.data.msg);
          if (res.data.status === 1) {
            this.refresh = 0;
            this.getDrinkList();
          }
        })
      } else {
        formData.append('id', this.m.id);
        axios.put("http://localhost:8081/drink", formData).then(res => {
          this.messageAlert(res.data.status, res.data.msg);
          if (res.data.status === 1) {
            this.refresh = 0;
            this.getDrinkList();
          }
        })
      }
    },

    del(index, row) {
      var that = this;
      axios.delete("http://localhost:8081/drink/" + row.id).then(res => {
        this.messageAlert(res.data.status, res.data.msg);
        if (res.data.status === 1) {
          this.refresh = 0;
          this.getDrinkList();
        }
      })

    },


    ok: function () {
      this.sub();
      this.cancel();
    },


    cancel: function () {
      this.dialogVisible = false;
      this.dialogVisibleOther = false;
    },

    handleSizeChange: function (val) {
      this.page.page = 1;
      this.page.pageSize = val;
      this.refresh = 0;
      this.getDrinkList();
    },
    handleCurrentChange: function (val) {
      this.page.page = val;
      this.refresh = 0;
      this.getDrinkList();
    },

    messageAlert: function (flag, msg) {
      if (flag === 1) {
        this.$message({
          message: msg,
          center: true,
          type: "success"
        })
      } else {
        this.$message({
          message: msg,
          center: true,
          type: "error"
        })
      }
    }
  }
}
</script>

<style>
.headDiv {
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.queryName {
  margin-left: 200px;
}

.queryStatus {
  margin-left: 150px;
}

.bodyDiv {
  margin-top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.bodyBottom {
  height: 60px;
}

.bodyBottomPage {
  margin-top: 30px;
}

.item {
  margin-top: -10px;
}


</style>
